<template>
  <el-table :data="datas" style="width: 100%">
    <el-table-column prop="type" label="类型">
      <template #="{ row, $index }">
        <ElInput v-model="datas[$index].type"></ElInput>
      </template>
    </el-table-column>
    <el-table-column prop="value" label="音标">
      <template #="{ row, $index }">
        <ElInput v-model="datas[$index].value"></ElInput>
      </template>
    </el-table-column>
    <!-- <el-table-column label="操作" width="80">
      <ElButton>del</ElButton>
    </el-table-column> -->
    <template #empty>
      <el-button @click="add">新增音标</el-button>
    </template>
  </el-table>
</template>

<script setup lang='ts'>
const model = defineModel({
  default: [{
    type:'美音',
    value:''
  },{
    type:'英音',
    value:''
  }]
})

const datas = ref(model.value)
const add = () => {
  datas.value.push({
    type: '',
    value: ''
  })
}
watch(()=>datas,(v)=>{
  //@ts-ignore
  model.value = v;
},{
  deep:true
})
</script>

<style></style>
